<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.5 CSS3径向渐变 radial-gradient</title>
   <style>
       .ceng{
           width:100px;
           height:100px;
           border: 1px solid black;
           border-radius: 50%;
           margin: 10px;
           float: left;
       }
       .circle{
           /*渐变*/
           background-image:radial-gradient(circle at top, orange,green);
       }
       .ellipse{
           background-image: radial-gradient(ellipse at center,orange,green,red);
       }
   </style>



</head>
<body>
   <div class="ceng circle"></div>
   <div class="ceng ellipse"></div>
   <div class="ceng "></div>
</body>
</html>